<div class="main-section">
    <h1 class="main-section__title">Customization</h1>

    <p class="main-section__intro">
        You can use LumX in your Sass project to get all variables and mixins available.<br />
        <a href="/css/mixins">Check what amazing things you can do</a>.
    </p>

    <lx-component lx-title="Common settings" lx-path="/includes/getting-started/customization/variable.html" lx-language="css" lx-is-open="true" lx-no-demo="true">
        You can override LumX default settings <code>dist/scss/settings/_defaults.scss</code> if you want to change sizes, main colors, etc.<br />
        For example, in a settings file located in your project <code>scss/settings/_common.scss</code>.
    </lx-component>

    <lx-component lx-title="Main SCSS file" lx-path="/includes/getting-started/customization/main.html" lx-language="css" lx-is-open="true" lx-no-demo="true">
        Then, create your main file where you will import your settings first and then LumX main scss file <code>dist/scss/_lumx.scss</code>.<br />
        For example, in your main file located in your project <code>scss/my-project.scss</code>.
    </lx-component>

    <lx-component lx-title="Thanks to..." lx-no-demo="true">
        <p>
            We’d like to thank Harry Roberts for his CSS framework, <a href="https://github.com/inuitcss" target="_blank">Inuitcss</a>, which is a powerful, scalable, Sass-based, BEM, OOCSS framework.<br />
            LumX CSS framework is largely inspired from his work.
        </p>

        <p>
            We invite you to follow these guidelines to build your project:<br />
            <a href="https://github.com/csswizardry/CSS-Guidelines" target="_blank">https://github.com/csswizardry/CSS-Guidelines</a>
        </p>
    </lx-component>
</div>